<template>
    <div class="zoom" >
      <div
        class="zoom-point"
        v-for="(item, index) in directionList"
        :key="index"
        :data-index="index"
        data-type="zoom-point"
        draggable="false"
        :style="getPointStyle(index)">
      </div>
    </div>
</template>

<script >

import { directionList, initialAngle, angleToCursor } from "./direction"

export default {
  data() {
    return {
      directionList,
      initialAngle,
      angleToCursor,
    }
  },
  props: {
    defaultStyle: {
      require: true,
      type: Object,
      default: ()=> {}
    }
  },
  methods: {
    getPointStyle(index) {
      let newLeft = 0
      let newTop = 0
      switch (index){
        case 0:
          newLeft = 0
          newTop = 0
          break
        case 1:
          newLeft = "50%"
          newTop = 0
          break
        case 2:
          newLeft = "100%"
          newTop = 0
          break
        case 3:
          newLeft = "100%"
          newTop = "50%"
          break
        case 4:
          newLeft = "100%"
          newTop = "100%"
          break
        case 5:
          newLeft = "50%"
          newTop = "100%"
          break
        case 6:
          newLeft = "0%"
          newTop = "100%"
          break
        case 7:
          newLeft = "0%"
          newTop = "50%"
          break
      }

      const style = {
          marginLeft: "-4px",
          marginTop: "-4px",
          left: newLeft,
          top: newTop,
          cursor: `${this.angleToCursor[index].cursor}-resize`,
      }
      return style
    },
  }

}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
